{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="{% static 'login/img/333.jpg' %}">

    <title>登录</title>

    <!-- Bootstrap 核心CSS文件 -->
    <link href="{% static 'login/css/bootstrap.min.css' %}" rel="stylesheet">

    <style type="text/css">
        body{
          background: url("{% static 'login/img/111.jpg' %}")  no-repeat center;
          background-size: cover;
          width: 100%;
        }
        .fa{display: inline-block;
        	top: 27px;
        	left: 6px;
        	position: relative;color: #ccc;
        }
        input[type="text"],input[type="password"]{padding-left:26px;}
        #checkbox{padding-left:21px;}
        
        .form-signin-heading{
            text-align: center;
            font-size: 40px;
            color: #337ab7;
            display: inline-block;    
            margin:120px auto 135px;
        }
        a{
        	color: red;
        }
        .tl{
        	color: #fffcf3;
        	font-size: 24px;
        	display: inline-block;
        }
		
        .tabbable{
            background: rgba(255,255,255,0.1);
        }
        #video2{
        	margin-top: 258px;
        }
        #canvasCemara{
        	margin-top: 271px;
        }
        .lg_btn{
        	width: 117px;
        }
        .face_btn{
        	width: 135px;
        }
        #lg_inp{
        	display: none;
        }
    </style>
  </head>

  <body>

    <div class="container">
      <div class="row">
        <div class="col-md-4">
          <canvas id="canvasCemara" width="300" height="250"></canvas>
        </div>
        <div class="col-md-4 login_box">
        <center>
            <span class="form-signin-heading"><b>登录系统</b></span>
        </center>
        <div class="tabbable" id="tabs-142713">
			<center>

				<button class="btn btn-info btn-lg lg_btn" type="button" onclick="loginFun()">账号登录</button>
				<button class="btn btn-info btn-lg lg_btn" type="button" onclick="openVideo()">人脸登录</button>
				<a href="{% url 'login:register' %}" style="display: inline;"><button class="btn btn-info btn-lg lg_btn" type="button">注册账号</button></a>
			</center>
            <!-- <ul class="nav nav-tabs">
                <li class="active">
                    <a href="#panel-71949" data-toggle="tab" contenteditable="false">账号登录</a>
                </li>
            </ul> -->
            <div class="tab-content" id="lg_inp">
                <!-- 登录界面 -->
				<span class="tl">账号登录</span>
                <div class="tab-pane active" id="panel-71949">
                    <form class="form-signin" action="{% url 'login:login_yunsuan' %}" method="post">
                        {% csrf_token %}
                    {% if message %}
                        <h4 style="color: red;">{{message}}</h4>
                    {% endif %}
                    <label for="inputName" class="sr-only">账号：</label>
                    <input type="text" name="username" id="inputName" class="form-control" placeholder="账号" required autofocus maxlength="9" >
                    <i class="fa fa-lock fa-lg"></i>
                    <label for="inputPassword" class="sr-only">密码：</label>
                    <input type="password" name="password" id="inputPassword" class="form-control" placeholder="密码" required maxlength="15">
                    
                    <div class="checkbox">                   	
                        <label>
                        <input type="checkbox" value="remember-me"> 记住我
                        </label>
                        <a href="{% url 'login:ch_pwd' %}">&emsp;修改密码</a>
                    </div>
                    
                    <button class="btn btn-info btn-block" type="submit">登录</button>
                    
                </form>

                </div>
                
            </div>
        </div>  
    
    </div>
        <div class="col-md-4">
        	<form class="form-signin" action="{% url 'login:face_login' %}" method="post">
                {% csrf_token %}
				<video autoplay="" id="video2" style="width:300px;height:250px;"></video>
				<!-- <input type="text"> -->
				<button type="button" id='btn' class="btn btn-success face_btn" style="margin: 5px 0 0 10px;display:none;">拍摄</button>
				<input type="hidden" name="img64" id="img_inp">
				<input type="submit" class="btn btn-info face_btn" name="" id="btn2" style="margin: 5px 0 0 10px;display:none;" value="登录">
				<label for="inputGrade" class="sr-only">班级：</label>
                <input type="text" name="usergrade" id="inputGrade" class="form-control" placeholder="输入班级:" required style="display: none;">
				
				<script>
				function loginFun(){
					document.getElementById("lg_inp").style.display="block";
				}
				var video = document.getElementById('video2');
				var constraints = {audio: false, video: true};
				function successCallback(stream) {
					video.srcObject = stream;
					video.play();
				}
				function errorCallback(error) {
					console.log("navigator.getUserMedia error: ", error);
					$(".CameraTips").show();
				}
				function openVideo(){
					navigator.mediaDevices.getUserMedia(constraints)
					.then(successCallback)
					.catch(errorCallback);
					document.getElementById("lg_inp").style.display="none";
					document.getElementById("btn").style.display="inline-block";
					document.getElementById("btn2").style.display="inline-block";
					document.getElementById("inputGrade").style.display="inline-block";
				}
				document.getElementById("btn").addEventListener("click", function () {
				var video = document.getElementById('video2');
				canvas = document.getElementById('canvasCemara');
				ctx = canvas.getContext('2d');
				var _w = 300, _h = 250;
				if (video.videoWidth > 0) _h = video.videoHeight / (video.videoWidth / _w);
				canvas.setAttribute('width', _w);
				canvas.setAttribute('height', _h);
				ctx.fillRect(0, 0, _w, _h);
				ctx.drawImage(video, 0, 0, _w, _h);
				});
				document.getElementById("btn2").addEventListener("click", function () {
			    var img_data=document.getElementById("canvasCemara");
			    var img_base=img_data.toDataURL("image/jpeg");
			    document.getElementById("img_inp").value=img_base;
				})
				</script>
			</form>
        </div>
        </div>
    </div>

    
    <!-- jquery部分： -->
    <script type="text/javascript" src="{% static 'login/js/jquery-3.3.1.min.js' %}"></script>
    <!-- Bootstrap部分： -->
    <script type="text/javascript" src="{% static 'login/js/bootstrap.min.js' %}"></script>    
  </body>
</html>
